﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户下单</title>
    <meta name="robots" content="all" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" href="~/styles/css/common/common.css">
    <link rel="stylesheet" href="~/styles/css/common/timepicker.css">
    <link rel="stylesheet" href="~/styles/css/component/component.css">
    <link rel="stylesheet" href="~/styles/css/order.css">
</head>
<body>
    <div class="wrapper" id="wrapper">      
        <input v-model="userName" style="display:none" />
        <clinic-head v-bind:user-name="userName" style="background-color:white"></clinic-head>
        <div class="expertInformationBox">
            <h1 class="expertTitle">
                <a href="javascript:;">专家信息</a>
            </h1>
            <div class="expertDoctor" v-model="doctorInfo">
                <h1 class="expertPic"><img v-bind:src="doctorInfo.Image" onerror="javascript: this.src = '/Styles/image/default_head.png'"></h1>
                <div class="expertInformation">
                    <h1><b>{{doctorInfo.Name}}</b><span>{{doctorInfo.DepName2}}-{{doctorInfo.TitleName}}</span></h1>
                    <p>{{doctorInfo.OrgName}}</p>
                </div>
                <div class="beGoodAtBox">
                    <p class="beGoodAtText">
                        <b>擅长：</b><span class="two-overflow">{{doctorInfo.SkillIn}}</span>
                    </p>
                    <p class="introduceText">
                        <b>简介：</b><span class="four-overflow">{{doctorInfo.DocInfo}}</span>
                    </p>
                    <i class="openBtn" v-on:click='openIntroduce()'>展开</i>
                    <div class="openBox" id="openBox" v-if="allGoodText">
                        <p class="beGoodAtText">
                            <b>擅长：</b><span>{{doctorInfo.SkillInText}}</span>
                        </p>
                        <p class="introduceText">
                            <b>简介：</b><span>{{doctorInfo.DocInfoText}}</span>
                        </p>
                        <i class="closeBtn" v-on:click='closeIntroduce()'>收起</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="doctorTimeAddBox">
            <h1 class="expertTitle">
                <a href="javascript:;">就诊时间及地点</a>
            </h1>
            <div class="doctorTime">
                <span class="title">就诊时间</span>
                <span class="doctorTime_date" id="datePicker" v-on:click="getValidDate()">{{inquiryDate}}</span>

                @*<input type="text" class="doctorTime_date" id="datePicker" v-on:click="getValidDate()" readonly v-model="testCsw">*@
                <input type="text" value='请选择时间段' v-model="selecteddoctorTime" class="doctorTime_spot" id="doctorTime_spot" v-on:click="showDoctorTimeItem()" readonly />
                <div id="dateWrap" class="dateWrap" v-on:mouseleave="hiddenDoctorDateDetail()"></div>
                <div  id="doctorTime_spotListDiv" class="doctorTime_spotList" v-if="bDoctorTimeVisible" v-on:mouseleave="hiddenDoctorTimeDetail()">
                    <h1 class="spotList_title">选择时间段</h1>
                    <div class="spotList_box">
                        <div class="spotList_head" v-show="morningspotshow">
                            <p>上午</p>
                        </div>
                        <div class="morningBox"  v-show="morningspotshow">
                            <a v-for="x in morningTimeList" href="javascript:;" v-bind:class="[{'morningA_noClick': x.bmorningA_noClickActive},{'morningA_click': x.bmorningA_click}]" v-bind:id="x.TimeTarget" v-on:click="chooseDoctorTimeItem($event)">{{x.Time}}</a>
                        </div>
                        <div class="spotList_head" v-show="afternoonspotshow">
                            <p>下午</p>
                        </div>
                        <div class="afternoonBox"  v-show="afternoonspotshow">
                            <a v-for="x in afternoonTimeList" href="javascript:;" v-bind:class="[{afternoonA_noClick: x.bafternoonA_noClickActive},{afternoonA_click: x.bafternoonA_click}]" v-bind:id="x.TimeTarget" v-on:click="chooseDoctorTimeItem($event)">{{x.Time}}</a>
                        </div>
                        <div class="spotList_head" v-show="eveningspotshow">
                            <p>晚上</p>
                        </div>
                        <div class="eveningBox"  v-show="eveningspotshow">
                            <a v-for="x in eveningTimeList" href="javascript:;" v-bind:class="[{eveningA_noClick: x.beveningA_noClickActive},{eveningA_click: x.beveningA_click}]" v-bind:id="x.TimeTarget" v-on:click="chooseDoctorTimeItem($event)">{{x.Time}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="doctorAdd">
                <span>就诊地点</span>
                <input type="text" value='请选择城市' v-model="selectedCityName" class="doctorAdd_city" v-on:click="showCityItem()" readonly />
                <input type="text" value='请选择看诊地点' v-model="selectedOrganizationName" class="doctorAdd_add" id="" v-on:click="showOrganizationItem()" readonly />
                <div id="selectCityDiv" class="selectCity" v-if="bcityVisible" v-on:mouseleave="hiddenCityItem()">
                    <h1 class="selectCity_title">选择城市</h1>
                    <div class="selectCity_List">
                        <div class="selectCity_content" v-for="x in citylist">
                            <p>
                                <a href="javascript:;" v-bind:class="{cityActive: x.bcityActive}" v-bind:id="x.id" v-on:click="chooseCityItem($event)">{{x.name}}</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="selectDepartment" v-if="bOrganizationVisible" v-on:mouseleave="hiddenOrganizationItem()">
                    <h1 class="selectCity_title">选择门诊</h1>
                    <div class="selectDepartment_list">
                        <div class="selectCity_content" v-for="x in organizationList">
                            <p v-bind:class="{departmentActive: x.borganizationActive}" v-bind:id="x.hospitalID" v-on:click="chooseOrganizationItem($event)">{{x.hospitalName}}</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="visitingPersonBox">
            <h1 class="expertTitle">
                <a href="javascript:;">就诊人信息</a>
            </h1>
            <div class="visitingPersonReady" >
                <div class="visitingPersonReady_list" v-bind:class="[x.IsSelected?visitingPersonActive:visitingPersonDisactive]" v-for="x in familyMemberList">
                    <h1 v-bind:id="x.Id" v-on:click="FamilyMemberSetDefault($event)"><b>{{x.FamilyName}}</b>（<span>{{x.Gender}}</span><i>{{x.Age}}岁</i>）</h1>
                    <p v-bind:id="x.Id" v-on:click="FamilyMemberSetDefault($event)">{{x.FamilyMobile}}</p>
                    <p v-bind:id="x.Id" v-on:click="FamilyMemberSetDefault($event)">{{x.IDCardNo}}</p>
                    <a href="javascript:;" v-bind:id="x.Id" style="display:block" v-on:click="clickUpdate($event)">修改</a>
                    <strong style="display:block" v-bind:id="x.UserInfoJson" v-if="x.IsDefault">默认就诊人</strong>
                </div>
            </div>
            <div class="tipBox" id="tipBox">
                <p class="addImgTip" style="text-align: center; background-color: darkgray;color: red">{{sOrderTip}}</p>
            </div>
            <div class="newAddPerson">
                <div class="newAddPersonHead" v-bind:class="[showAdd?addBtn:reduceBtn]" v-on:click="clickAdd()" v-if="isGuset">{{familyTitle}}</div>
                <div class="formBox" v-if="showAdd">
                    <p class="formList">
                        <span>就诊人姓名</span>
                        <input type="text" v-model="FamilyMember.FamilyName" placeholder="请输入就诊人姓名" maxlength="15" v-on:input ="InputFunc"/>
                        <i>*</i>
                    </p>
                    <p class="formList">
                        <span>手机号</span>
                        <input type="text" v-model="FamilyMember.FamilyMobile" v-bind:class="validateCurrentUserDisable" placeholder="请输入就诊人手机号" maxlength="11" v-on:input ="PhoneValidate()"/>
                        <i>*</i>
                    </p>
                    <p class="formListCode">
                        <span>验证码</span>
                        <input class="validateCode" type="text" v-model="FamilyMember.ValidateCode" placeholder="请输入验证码" v-bind:class="validateCurrentUserDisable" v-on:input="registerValidation()"/>
                        <a href="javascript:;" id="getValidateCode" v-on:click="getValidateCode()" v-bind:class="validateDisable">获取验证码</a>
                        <i>*</i>
                    </p>
                    <p class="formList">
                        <span>证件号</span>
                        <input type="text" v-model="FamilyMember.IDCardNo" placeholder="请输入证件号" maxlength="18" v-on:input ="InputFunc"/>
                        <i>*</i>
                    </p>
                    <p class="formSubmit" v-if="isGuset">
                        <input type="checkbox" id="default" v-model="FamilyMember.IsDefault"><label for="default">设为默认就诊人</label>
                        <button class="saveBtn"  v-bind:id="FamilyMember.Id" v-on:click="FamilyMemberAdd()" v-bind:class="isFamilyMemberAddDisable">保存</button>
                        <button class="cancelBtn" v-on:click="clickCancel()">取消</button>
                    </p>
                </div>               
            </div>
            <div class="illnessText">
                <span>病情描述</span>
                <textarea v-model="description"></textarea>
            </div>
            <div class="uploadImg">
                <span class="uploadImg_title">上传图片</span>
                <div class="imgBox">
                    <p class="addImgBtn">
                        <span><i>+</i><a id='addPic' href="" v-on:click="addPic">添加图片 </a></span>
                        <b>病症部位 / 检查报告 / 请他病情资料</b>
                        <input type="file" v-on:change="onFileChange" multiple style="display: none;">
                    </p>
                    <div class="imgLists" v-if="images.length >0">
                        <div class="imgS" v-for="(key,image) in images">
                            <img v-bind:src="key" onerror="javascript: this.src = key">
                            <span v-bind:src="key" v-on:click='delImage(key)'>×</span>
                        </div>
                    </div>
                    <p class="addImgTip">温馨提示：如遇专家停诊，您的订单会被取消，我们会通过4001-108-102通知到您，请保持手机畅通，并及时关注订单状态。</p>
                </div>
            </div>
        </div>
        <div class="visitingTimeBox">
            <div class="visitingTime">
                <span>就诊时间：<b>{{selecteddoctorDate}} {{selecteddoctorTime}}</b></span>
                <span>就诊地点：<b>{{selectedOrganizationAddress}}</b></span>
                <span>就诊费用：<b>{{RegistrationFeeText}}元</b></span>
                <button v-on:click="ResvIntentionAdd">确认预约</button>
            </div>
        </div>
        <!--标准底部-->
        <clinic-foot class="foot"></clinic-foot>
        <!--右边导航栏 -->
        <clinic-right></clinic-right>

        <order-success-dialog :param="orderSuccess"></order-success-dialog>
</div>
    <script type="text/javascript" src="~/scripts/lib/jquery.js"></script>
    <script type="text/javascript" src="~/scripts/lib/xdlines.jquery.min.js"></script>
    <script type="text/javascript" src="~/scripts/js/public/zebra_datepicker.src.min.js"></script>
    <script type="text/javascript" src="~/scripts/lib/vue.min.js"></script>
    <script type="text/javascript" src="~/scripts/lib/vue-resource.min.js"></script>
    <script type="text/javascript" src="~/scripts/js/component/component.js"></script>
    <script type="text/javascript" src="~/scripts/js/public/common.js"></script>
    <script type="text/javascript" src="~/scripts/js/order.js"></script>
    <script type="text/javascript">
        textOverflow();
    </script>
</body>
</html>
